<template>
  <s-layout :title="state.model.id ? '编辑地址' : '新增地址'">
    <uni-forms
      ref="addressFormRef"
      v-model="state.model"
      :rules="state.rules"
      validateTrigger="bind"
      labelWidth="160"
      labelAlign="left"
      border
      :labelStyle="{ fontWeight: 'bold' }"
    > 
      <view class="bg-white form-box ss-p-x-30">
        <uni-forms-item name="consignee" label="收货人" class="form-item">
          <uni-easyinput
            v-model="state.model.consignee"
            placeholder="请填写收货人姓名"
            :inputBorder="false"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          />
        </uni-forms-item>

        <uni-forms-item name="mobile" label="手机号" class="form-item">
          <uni-easyinput
            v-model="state.model.mobile"
            type="number"
            placeholder="请输入手机号"
            :inputBorder="false"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          >
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item
          name="region"
          label="省市区"
          @tap="state.showRegion = true"
          class="form-item"
        >
          <uni-easyinput
            v-model="state.model.region"
            disabled
            :inputBorder="false"
            :styles="{ disableColor: '#fff', color: '#333' }"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
            placeholder="请选择省市区"
          >
            <template v-slot:right>
              <uni-icons type="right"></uni-icons>
            </template>
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="address_des" label="收货定位" class="textarea-item" v-if="state.showAddressDesc"
          :formItemStyle="{ alignItems: 'flex-start' }"
          :labelStyle="{ lineHeight: '5em' }">
          <view style="display: inline-flex;"> 
			  <uni-easyinput style="width:470rpx;" @tap="openLocation" disabled v-if="!state.showChoseLocation"
			   type="textarea" clearable
				v-model="state.model.address_des"
				placeholder="请选择收货定位"
				:inputBorder="false"
				placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
			  >
			  </uni-easyinput>			  
			 <view class="chose-view"  v-else  @tap="openLocation"> 点击选择定位 </view>
			 <view class="chose-img" v-if="state.showLocation" @tap="openLocation" ><image class="icon-dw" src="/static/icon-dw-dz.png" ></image>修改
			 </view>
		 </view>		 
        </uni-forms-item>
        <uni-forms-item
          name="address"
          label="详细地址"
          :formItemStyle="{ alignItems: 'flex-start' }"
          :labelStyle="{ lineHeight: '5em' }"
          class="textarea-item"
        >	
          <uni-easyinput 
            :inputBorder="false"
            type="textarea"
            v-model="state.model.address"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
            placeholder="请输入详细地址"
            clearable
          ></uni-easyinput>
	
        </uni-forms-item> 
      </view>

      <view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box">
        <view class="default-box-title"> 设为默认地址 </view>
        <su-switch style="transform: scale(0.8)" v-model="state.model.is_default"></su-switch>
      </view>
    </uni-forms>
    <su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
      <view class="footer-box ss-flex-col ss-row-between ss-p-20">
        <view class="ss-m-b-20"
          ><button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">保存</button></view>
        <button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
          删除
        </button>
      </view>
    </su-fixed>
    <!-- 省市区弹窗 -->
    <su-region-picker
      :show="state.showRegion"
      @cancel="state.showRegion = false"
      @confirm="onRegionConfirm"
    >
    </su-region-picker>
  </s-layout>
</template>

<script setup>
  import { computed, watch, ref, reactive, unref } from 'vue';
  import sheep from '@/sheep';
  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
  import _ from 'lodash';
  import { consignee, mobile, address, region } from '@/sheep/validate/form';

  const addressFormRef = ref(null);
  const state = reactive({
    showRegion: false,
    model: {
      consignee: '',
      mobile: '',
      address: '',
      is_default: false,
      region: '',
      address_des: '',
      latitude: '',
      longitude: '', 
    },
    rules: {
      consignee,
      mobile,
      address,
      region, 
    },
	showChoseLocation: false,
	showLocation: false,
	showAddressDesc: false,
	first:false,
	blackList:[],
  });
  watch(
    () => state.model.province_name,
    (newValue) => {
      if (newValue) {
        state.model.region = `${state.model.province_name}-${state.model.city_name}-${state.model.district_name}`;
		if (state.first) {
			state.first = false
			if(state.blackList.indexOf(state.model.region) >= 0){
				state.showChoseLocation = false
				state.showLocation = true
				state.showAddressDesc = true
			}else{
				state.showChoseLocation = true
				state.showLocation = false
				state.showAddressDesc = false
			}
		}else{ 
			if(state.blackList.indexOf(state.model.region) >= 0){				
				state.showChoseLocation = true
				state.showLocation = false
				state.showAddressDesc = true
			}else{
				state.showChoseLocation = false
				state.showLocation = true
				state.showAddressDesc = false
			} 
		}

      }
    },
    {
      deep: true,
    },
  );
  const onRegionConfirm = (e) => {
    state.model = {
      ...state.model,
      ...e,
    };
    state.showRegion = false;
  };
  const getAreaData = async () => {
	await sheep.$api.user.address.getCheckArea().then((res) => {
	  if (res.code === 1) {
	     state.blackList = res.data
	  }
	});  
    if (_.isEmpty(uni.getStorageSync('areaData'))) {
      sheep.$api.data.area().then((res) => {
        if (res.code === 1) {
          uni.setStorageSync('areaData', res.data);
        }
      });
    }
  };
  const onSave = async () => {
   if(state.blackList.indexOf(state.model.region) >= 0 && (state.model.address_des == '' || state.model.address_des == null)){
	   sheep.$helper.toast('请选择收货定位');
	   return
   }
    let res = null;
    if (state.model.id) {
      res = await sheep.$api.user.address.update(state.model.id, state.model);
    } else {
      res = await sheep.$api.user.address.create(state.model);
    }
    if (res.code === 1) {
      sheep.$router.back();
    }
  };

  const onDelete = () => {
    uni.showModal({
      title: '提示',
      content: '确认删除此收货地址吗？',
      success: async function (res) {
        if (res.confirm) {
          const { code } = await sheep.$api.user.address.delete(state.model.id);
          if (res.code === 1) {
            sheep.$router.back();
          }
        }
      },
    });
  };
  const openLocation = () => {
  		uni.chooseLocation({
			// latitude: state.model.latitude || '',
			// longitude: state.model.longitude || '',
  			success: (res) => {
			
				state.model.latitude = res.latitude
				state.model.longitude = res.longitude
				let addr = res.address;
				let name = res.name;
				addr = addr.replace(state.model.province_name,'')
				addr = addr.replace(state.model.city_name,'')
				addr = addr.replace(state.model.district_name,'')
  				state.model.address = addr+','+name
  				state.model.address_des = name
				state.showChoseLocation = false
				state.showLocation = true
  			},
			fail: (err) => {
				console.log(err)
			}
  		});
  };
  onLoad(async (options) => {
    await getAreaData();
    if (options.id) {
	 state.first = true
      let res = await sheep.$api.user.address.detail(options.id);
      if (res.code === 1) {
        state.model = {
          ...state.model,
          ...res.data,
        };  
      }
    }

    if (options.data) {
      let data = JSON.parse(options.data);
      state.model = {
        ...state.model,
        ...data,
      };
	  state.model.region = `${state.model.province_name}-${state.model.city_name}-${state.model.district_name}`;
	  if(state.blackList.indexOf(state.model.region) >= 0){
	  	state.showChoseLocation = false
	  	state.showLocation = true
	  	state.showAddressDesc = true
	  }else{
	  	state.showChoseLocation = true
	  	state.showLocation = false
	  	state.showAddressDesc = false
	  }
    }
  });
</script>

<style lang="scss" scoped>
  :deep() {
    .uni-forms-item__label .label-text {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
    }

    .uni-easyinput__content-input {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      padding-left: 0 !important;
    }

    .uni-easyinput__content-textarea {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      margin-top: 8rpx !important;
    }

    .uni-icons {
      font-size: 40rpx !important;
    }

    .is-textarea-icon {
      margin-top: 22rpx;
    }

    .is-disabled {
      color: #333333;
    }
  }

  .default-box {
    width: 100%;
    box-sizing: border-box;
    height: 100rpx;

    .default-box-title {
      font-size: 28rpx;
      color: #333333;
      line-height: normal;
    }
  }

  .footer-box {
    .save-btn {
      width: 710rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: $white;
    }

    .cancel-btn {
      width: 710rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background: var(--ui-BG);
    }
  }
  .icon-dw { 
  	width: 32rpx;
  	height: 32rpx;
  }
  .chose-view{
	font-size: 11px;
	height: 75rpx;
	border-radius: 40rpx;
	line-height: 75rpx;
	width: 500rpx;
	text-align: center;
	border: 1px solid #4CAF50;
  }  
  .chose-img{
  	font-size: 7px;
	height: 32rpx;
	line-height: 32rpx;
	margin: auto;
	color:#279c27;
	display: inline-flex;
  }
</style>
